<script lang="ts" setup>
import { ref, toRaw } from 'vue';
const isShow = ref(false);

interface Emits {
    (e: 'change', url: string, id: string): void;
}
const emit = defineEmits<Emits>();

const list = defineModel<any>('list', {
    default: []
});
const props = defineProps({
  id: {
    type: String,
    default: ''
  }
});
const title = ref('');
const checkId = ref('');
setTimeout(() => {
    const _list = toRaw(list.value);
    if (_list?.length === 0) return;
    title.value = _list?.[0].name;
    checkId.value = _list?.[0].id;
}, 500);

const handleSelect = _id => {
    checkId.value = _id;
    list.value.forEach((item: any) => {
        if (item.id == _id) {
            title.value = item.deviceName;
            emit('change', item.serialNumber, item.channelNo, item.id);
        }
    });
    isShow.value = false;
};
</script>

<template>
    <div class="selectBox" :id="props.id" :data-id="checkId">
        <div class="warp" @click="isShow = !isShow">
            <span>{{ title }}</span>
            <img style="user-select: none" src="../../../assets/imgs/breedDetails/ic_pulldown@2x.png" alt="" />
        </div>
        <ul v-show="isShow" class="warp-list">
            <template v-for="item in list">
                <li :class="checkId == item.id ? 'check-item' : ''" @click="handleSelect(item.id)">
                    {{ item.deviceName }}
                </li>
            </template>
        </ul>
    </div>
</template>

<style lang="scss" scoped>
.selectBox {
    position: relative;
    margin-left: 20px;

    .warp {
        cursor: pointer;
        padding: 4px 12px;
        background: linear-gradient(180deg, #3674a3 0%, #1d3e79 100%);
        border-radius: 2px;
        border: 1px solid;
        border-image: linear-gradient(180deg, rgba(56, 116, 202, 1), rgba(59, 110, 183, 1)) 1 1;
        display: flex;
        align-items: center;

        span {
            font-weight: 400;
            font-size: 14px;
            color: #a2deff;
            width: 150px; /* 设置固定宽度 */
            white-space: nowrap; /* 不换行 */
            overflow: hidden; /* 超出部分隐藏 */
            text-overflow: ellipsis; /* 超出部分显示省略号 */
        }

        img {
            width: 20px;
            height: 20px;
        }
    }

    .warp-list {
        width: 100%;
        position: absolute;
        z-index: 9;
        top: 35px;
        left: 0;
        background: #19296a;
        border-radius: 2px;
        border: 1px solid;
        border-image: linear-gradient(180deg, rgba(56, 116, 202, 1), rgba(59, 110, 183, 1)) 1 1;
        padding: 8px 0;

        li {
            margin: 0 6px;
            padding: 1px 6px;
            font-weight: 400;
            font-size: 14px;
            color: #a2deff;
            cursor: pointer;

            &:hover {
                font-weight: 400;
                font-size: 14px;
                color: #fff6a2;
                background: rgba(255, 255, 255, 0.11);
                border-radius: 2px;
            }
        }
    }
}
</style>
